<template>
  <a-layout class="layout-box">
    <a-layout-sider :collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" v-if="!collapsed">【后台管理系统】</div>
      <div class="logo" v-else>
        <AppstoreOutlined />
      </div>
      <a-menu
        theme="dark"
        mode="inline"
        v-model:selectedKeys="selectedKeys"
        @click="menuClick"
        :openKeys="openKeys"
        @openChange="onOpenChange"
      >
        <template v-for="item in menuList" :key="item.path">
          <a-menu-item v-if="!item.children.length" :key="item.path">
            <user-outlined />
            <span style="font-size: 15px;">{{ item.menu_name }}</span>
          </a-menu-item>
          <a-sub-menu v-if="item.children.length" :key="item.path">
            <template #icon>
              <AppstoreOutlined />
            </template>
            <template #title>{{ item.menu_name }}</template>
            <template v-for="item2 in item.children" :key="item2.path">
              <a-menu-item v-if="item.children.length" :key="item2.path">{{ item2.menu_name }}</a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-row>
          <a-col class="gutter-row">
            <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
          </a-col>

          <a-col class="gutter-row">
            <a-avatar style="background-color: #1890ff">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                <PoweroffOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a href="javascript:;">修改密码</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="showConfirm">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">山西智网科技有限公司</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import 'ant-design-vue/dist/antd.css';
import {
  UserOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PoweroffOutlined,
  AppstoreOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { defineComponent, ref, createVNode, toRefs, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Modal } from 'ant-design-vue';
export default defineComponent({
  components: {
    UserOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PoweroffOutlined,
    AppstoreOutlined
  },

  setup() {
    const router = useRouter()
    const menuClick = (key) => {
      router.push({ path: key.key })
    }
    const showConfirm = () => {
      Modal.confirm({
        title: () => '你确定要退出吗?',
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => createVNode('div', { style: 'color:red;' }, ''),
        onOk() {
          window.localStorage.removeItem('ele_login')
          router.replace({ path: '/' })
        },
        onCancel() {

        },
        okText: () => '确定',
        cancelText: () => '取消',
      });

    }
    const state = reactive({
      openKeys: [''],
      selectedKeys: [],
    });
    const onOpenChange = openKeys => {
      const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
      state.openKeys = latestOpenKey ? [latestOpenKey] : [];
    };
    return {
      showConfirm,
      menuList: [
        {
          path: '/layout',
          menu_name: '首页',
          children: [
            {
              path: 'home',
              menu_name: '首页'
            }
          ]
        },
        {
          menu_url: '/layout',
          menu_name: '关于我们',
          children: [
            {
              path: '/layout/new',
              menu_name: '新闻列表',
              children: [

              ]
            }, {
              path: '/layout/about',
              menu_name: '关于我们',
              children: [

              ]
            }
          ]
        }
      ],
      ...toRefs(state), 
      onOpenChange,
      menuClick,
      collapsed:ref(false),
    }

  },
});
</script>

<style scoped lang="scss">
.logo {
  color: #fff;
  font-size: 20px;
  padding: 20px 0;
  font-weight: bold;
  text-align: center;
}
.ant-menu-inline .ant-menu-item {
  margin-top: 0 !important;
}
.layout-box {
  height: 100vh;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
.ant-avatar.ant-avatar-icon {
  margin-right: 20px !important;
}
.ant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 60px;
}
</style>
